import React, { useState } from 'react'
import { View, Text, SafeAreaView, ScrollView, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
import { useNavigation, useRoute } from '@react-navigation/native'
import { Header } from '../../components'
import { POST, pxToPt } from '../../utils'
import { Toast } from '@ant-design/react-native'
import { FRIENDREQUEST } from '../../service'
import {useSelector}from 'react-redux'

export default function index() {
  const user = useSelector(state=>state.user)
  const navigation = useNavigation()
  const [requstInfo, setRequestInfo] = useState('')
  const route = useRoute()
  const fid = route.params.fid
  const addFriend = async () => {
  if(fid===user.currentUser.userId){
    Toast.fail('不能添加自己')
    return
  }
   const res = await POST(FRIENDREQUEST, {
     data: {
      receiverId: fid,
      requesterId: user.currentUser.userId
      },
      token: user.currentUser.token
    })
   if(res.status==='ok') {
     Toast.success('请求已发送')
   }

  }
  return (
    <SafeAreaView style={styles.container}>
      <Header left={<Text onPress={navigation.goBack}>back</Text>} title="好友申请" />
      <ScrollView >
        <View style={styles.main} >
          <View>
            <Text style={styles.label}>发送添加好友请求</Text>
            <TextInput 
              onChangeText={e=>setRequestInfo(e)}
              maxLength={80}
              multiline
              style={styles.input}
              value={requstInfo}
              />
          </View>
          <TouchableOpacity onPress={addFriend}>
            <View style={styles.send}>
              <Text >发送</Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#212529'
  },
  main: {
    marginLeft: pxToPt(20),
    marginRight: pxToPt(20),
    marginTop: pxToPt(30)
  },
  label: {
    color: 'white',
    fontSize: pxToPt(15)
  },
  input: {
    height: pxToPt(50),
    backgroundColor: '#FFE4B5',
    borderRadius: pxToPt(5),
    marginTop: pxToPt(10),
    height: pxToPt(200),
    fontSize: pxToPt(25),
    padding: pxToPt(10),
    color: '#708090'
  },
  send: {
    height: pxToPt(50),
    backgroundColor: '#FDF5E6',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: pxToPt(10),
    width: pxToPt(300),
    alignSelf: 'center',
    marginTop: pxToPt(20)
  }
})